<template>
  <view class="flex-col justify-start section_3 pos">
    <view class="flex-col section_7">
      <text class="self-center font_2 text_4">{{ $t('mine.changePassword') }}</text>
      <view class="flex-col self-stretch group_5">
        <text class="self-start font">{{ $t('mine.newPassword') }}</text>
        <view class="flex-row justify-between items-center self-stretch section_8">
          <u--input :placeholder="$t('mine.newPasswordPlace')" border="none" :password="showPWD" v-model="newPassword" />
          <view class="flex-col justify-start items-end image-wrapper" @click="toggleShowPWD">
            <image class="image_6" :src="eyeIcon" />
          </view>
        </view>

        <text class="self-start font text_8">{{ $t('mine.emailVerficatonCode') }}</text>
        <input-verify
          class="input-msg-code"
          inputType="msgCode"
          :placeHolder="$t('login.common.emailCode')"
          :errMsg="$t('mine.emailVerficationCode')"
          v-model="msgCode"
          @getMsgCode="getMsgCode"
          :isVerifyCode="true"
          :isImgCode="isImgCode"
          @isCanSetPhoneMsg="isCanSetPhoneMsg"
          ref="msgCodeRef"
        />
      </view>
      <view class="flex-row self-stretch group_6">
        <view class="flex-col justify-start items-center text-wrapper_2" @click="handleClose">
          <text class="text_12">{{ $t('mine.cancel') }}</text>
        </view>
        <view class="flex-col justify-start items-center text-wrapper_3 ml-31" @click="handleOk">
          <text class="font_2 text_13">{{ $t('mine.confirm') }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import InputVerify from '@/components/InputVerify/index.vue';
import { sendEmailCode } from '@/service/register.js';
import { setLoginPwd } from '@/service/mine';

export default {
  components: {
    InputVerify
  },
  props: {
    email: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      showPWD: false,
      eyeIcon: '/static/settings/open_eye.png',
      newPassword: '',
      msgCode: '',
      email: this.$store.getters['user/setProfile'].email
    };
  },
  computed: {
    isImgCode() {
      if (this.email) {
        return true;
      }
      return false;
    }
  },
  methods: {
    toggleShowPWD() {
      this.showPWD = !this.showPWD;
      if (this.showPWD) {
        this.eyeIcon = '/static/settings/open_eye.png';
      } else {
        this.eyeIcon = '/static/settings/close_eye.png';
      }
    },
    isCanSetPhoneMsg() {
      if (!this.email) {
        uni.showToast({
          icon: 'none',
          duration: 1500,
          title: 'email is empty'
        });
      }
    },
    // ...mapMutations(['setToken']),
    async getMsgCode() {
      console.log('email', this.email);

      if (!this.email) {
        uni.showToast({
          title: 'Email format error',
          icon: 'none',
          duration: 1500
        });

        return;
      }

      const { data, statusCode: code } = await sendEmailCode({
        email: this.email
      });
      console.log(data, code, '===》获取email验证码');
      if (code === 200) {
        if (this.$refs.msgCodeRef) {
          this.$refs.msgCodeRef.handleMsgCodeCountDownTime();
        }
      }
    },
    handleClose() {
      this.$emit('close');
    },
    async handleOk() {
      uni.showToast({
        title: 'confirm ...',
        icon: 'none',
        duration: 1500
      });
      const { data, statusCode: code } = await setLoginPwd({
        email: this.email,
        code: this.msgCode,
        pwd: this.newPassword
      });

      console.log(data, code, '===》修改密码');
      if (code === 200) {
        if (this.$refs.msgCodeRef) {
          this.$refs.msgCodeRef.handleMsgCodeCountDownTime();
        }
      }
      this.$emit('close');
    }
  }
};
</script>

<style scoped lang="scss">
.ml-31 {
  margin-left: 1.94rem;
}

.section_3 {
  padding: 12.75rem 0;
  background-color: #000000b3;

  .section_7 {
    margin: 0 1rem;
    padding: 1.63rem 1rem 1.25rem;
    border-radius: 1.5rem;

    background-image: url('@/static/common/dialog_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .font_2 {
      font-size: 1rem;
      font-family: PingFang SC;
      color: #ffffff;
    }

    .text_4 {
      line-height: 0.94rem;
    }

    .group_5 {
      margin-top: 1.88rem;

      .input-msg-code {
        margin-top: 24upx;
      }

      .font {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.56rem;
        color: #ffffff;
      }

      .section_8 {
        margin-top: 0.5rem;
        padding: 0.88rem 0.75rem;
        background-color: #ffffff1a;
        border-radius: 0.5rem;

        /deep/ .uni-input-input {
          color: #ffffff;
        }

        .text_5 {
          line-height: 0.81rem;
        }

        .image-wrapper {
          margin-right: 0.25rem;
          width: 2.25rem;
          border-left: solid 0.031rem #ffffff1a;

          .image_6 {
            width: 1.25rem;
            height: 1.25rem;
          }
        }

        .text_7 {
          line-height: 0.39rem;
        }
      }

      .text_6 {
        margin-top: 1rem;
      }

      .text_8 {
        margin-top: 1rem;
      }

      .section_10 {
        margin-top: 0.5rem;
        padding: 0.88rem;
        background-color: #ffffff1a;
        border-radius: 0.5rem;

        .text_9 {
          color: #ffffff80;
          line-height: 0.65rem;
        }

        .text-wrapper {
          margin-right: 0.38rem;
          padding: 0.38rem 0;
          width: 5.4rem;
          border-left: solid 0.031rem #ffffff1a;

          .text_10 {
            font-size: 0.81rem;
            line-height: 0.6rem;
          }
        }
      }

      .font_3 {
        font-size: 0.88rem;
        font-family: PingFang SC;
        color: #ffffff;
      }
    }

    .group_6 {
      margin-top: 2.25rem;

      .text-wrapper_2 {
        padding: 1.13rem 0;
        flex: 1 1 8.75rem;
        background-color: #ffffff33;
        border-radius: 0.75rem;
        backdrop-filter: blur(1rem);
        height: 3rem;

        .text_12 {
          color: #ffffffb3;
          font-size: 1rem;
          font-family: PingFang SC;
          line-height: 0.74rem;
        }
      }

      .text-wrapper_3 {
        padding: 1.13rem 0;
        flex: 1 1 8.75rem;
        background-image: linear-gradient(113.8deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
        border-radius: 0.75rem;
        height: 3rem;

        .text_13 {
          line-height: 0.74rem;
        }
      }
    }
  }
}

.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>
